<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col :span="6" :xs="24">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>个人信息</span>
					</div>
					<div>
						<template>
							<!-- <img :src="$store.state.imgShowRoad2 + '/file/' + user.avatar" class="avatar"/> -->
								<el-upload
								  class="orders-img_el_upload"
								  :action="upurl"
								  :limit="3"
								  list-type="picture-card"
								  :on-change="handleChange"
								  :on-preview="handlePreview"
								  :on-remove="handleRemove"
								  :on-success="handleSuccess"
								  :on-error="handleError"
								  :file-list="fileList"
								  :class="{ disUoloadSty: noneBtnImg }"
								  @mouseenter="showUploadButton = true"
								  @mouseleave="showUploadButton = false"
								  ref="upload">
								  <img :src="$store.state.imgShowRoad2 + '/file/' + user.avatar" class="avatar"/>
								  <span class="orders-img_el_upload_btn" @click.stop="submitUpload" 
								  v-if="showUploadButton">上传图片</span>
								</el-upload>
						</template>
						<ul class="list-group list-group-striped">
							<li class="list-group-item">
								<i class="el-icon-user" />用户名
								<div class="pull-right">{{ user.userName }}</div>
							</li>
							<li class="list-group-item">
								<i class="el-icon-phone-outline" />手机号码
								<div class="pull-right">{{ user.phone }}</div>
							</li>
							<li class="list-group-item">
								<i class="el-icon-message" />用户邮箱
								<div class="pull-right">{{ user.email }}</div>
							</li>
							<li class="list-group-item">
								<i class="el-icon-date" />创建日期
								<div class="pull-right">{{ user.createTime }}</div>
							</li>
						</ul>
					</div>
				</el-card>
			</el-col>
			<el-col :span="18" :xs="24">
				<el-card>
					<div slot="header" class="clearfix">
						<span>基本资料</span>
					</div>
					<el-tabs v-model="activeTab">
						<el-tab-pane label="基本资料" name="userinfo">
							<userInfo :user="user" />
						</el-tab-pane>
						<el-tab-pane label="修改密码" name="resetPwd">
							<resetPwd />
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import userInfo from "./userInfo.vue";
	import resetPwd from "./resetPwd";
	import userApi  from "@/api/user.js";
	
	export default {
		name: "Profile",
		components: {
			userInfo,
			resetPwd
		},
		data() {
			return {
				showUploadButton: false,
				dialogImageUrl: "",
				dialogVisible: false,
				showBtnImg: true,
				noneBtnImg: false,
				limitCountImg: 3,
				upurl: "/api/file/upload/avatar",
				fileList: [],
				imgurl: "",
				userInfo:{},
				user: {},
				activeTab: "userinfo"
			};
		},
		computed: {
		  //   avatarUrl() {
		  //     // 计算属性，从 Vuex 状态管理器中获取图片路径
		  //     return this.$store.state.imgShowRoad2 + '/file/' + this.userInfo.avatar
		  //   }
		  },
		methods: {
			async getUser() {
				const res = await userApi.queryUserName('/znUsers/queryUserName',{
					userName:this.userInfo.userName
				});
				this.user = res.data;
			},
			handleError(err, file, fileList) {
			  this.$message({
			    message: "上传失败！",
			    type: "success",
			  });
			  console.log(err);
			},
			handleSuccess(response, file, fileList) {
			  if (file.response.flag == true) {
			    this.fileList = fileList;
			    this.user.avatar = file.response.data;
			    if (fileList.length >= 3) {
			      this.uploadDisabled = true;
			    }
			    alert(file.response.message);
			  } else {
			    alert(file.response.data);
			  }
			},
			handleChange(file, fileList) {
			  this.noneBtnImg = fileList.length >= this.limitCountImg;
			},
			handleRemove(file, fileList) {
			  this.noneBtnImg = fileList.length >= this.limitCountImg;
			  this.fileList.pop();
			  // this.form.photo = "";
			  this.uploadDisabled = false;
			},
			handlePreview(file) {
			  this.dialogImageUrl = file.url;
			  this.dialogVisible = true;
			},
			submitUpload() {
			  this.$refs.upload.submit();
			},
		},
		mounted() {
			// this.fileList = [{
			// 	name:"头像",
			// 	url: this.avatarUrl
			// }
			// ]
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
			this.getUser();
		},
	};
</script>
<style lang="scss" scoped>
	.app-container{
		width: 99%;
	}
	.avatar {
	  float: left;
	  width: 148px;
	  height: 148px;
	  border-radius: 3%;
	  margin-right: 10px;
	  }
</style>